<template>
  <div class="login">
    <Header>密码登录</Header>
    <section>
      <div class="form">

        <div class="input-wrapper">
          <input type="text" placeholder="请输入邮箱" v-model="form.email">
        </div>

        <div class="input-wrapper">
          <input type="password" placeholder="请输入密码" v-model="form.pwd">
        </div>

        <div class="input-wrapper">
          <input type="text" placeholder="请输入图像验证码" v-model="form.yzm"> 
          <img :src="yzm_img" @click="handleYzm">
        </div>

        <input type="sumbit" value="登录" @click="login">

        <div class="zc">
          <router-link to="/login">短信登录</router-link>

          <router-link to="/register">快速注册</router-link>
        </div>

      </div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script setup>
import Header from '@/components/common/Header.vue'
import Tabbar from '@/components/common/Tabbar.vue'
import { post_consumer_pwdLogin } from '@/api/consumerApi.js'
import { Toast } from 'vant'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const router = useRouter()
const store = useStore()

const yzm_img = ref( 'http://localhost:3000/consumer/yzm?uid=' + (new Date()).getTime() )
const handleYzm = () => {
  yzm_img.value = 'http://localhost:3000/consumer/yzm?uid=' + (new Date()).getTime()
}

const form = reactive({
  email: '',
  pwd: '',
  yzm: ''
})

const rules = reactive({
  email: {
    rule:/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
    msg:'邮箱格式错误'
  },
  pwd:{
    rule:/^\w{6,12}$/,
    msg:'密码不能为空，并且要求6,12位'
  },
  yzm: {
    rule: /^\w{4}$/,
    msg: '验证码不能空，且只能为4位'
  }
})

const login = async () => {
  if (!rules.email.rule.test(form.email)) {
    Toast.fail(rules.email.msg)
    return
  }

  if (!rules.pwd.rule.test(form.pwd)) {
    Toast.fail(rules.pwd.msg)
    return
  }

  if (!rules.yzm.rule.test(form.yzm)) {
    Toast.fail(rules.yzm.msg)
    return
  }

  try {
    let result = await post_consumer_pwdLogin(form.email, form.yzm, form.pwd)

    console.log(result)
    Toast.success('登录成功')
    
    // 跳转页面 存储用户信息
    store.commit('setUser', result)
    router.push('/my')
  } catch ({ response: { data } }) {
    Toast.fail(data.msg)
  } finally {
    form.email = ''
    form.pwd = ''
    form.yzm = ''
  }
  
}
</script>

<style lang="less" scoped>
.login {
  height: 100vh;
  display: flex;
  flex-direction: column;

  section {
    flex: 1;
    background-color: #f5f5f5;

    .form {
      display: grid;
      grid-template-columns: 1fr;
      padding: 30px 20px 0;
      row-gap: 20px;

      .input-wrapper {
        height: 45px;
        border-radius: 3px;
        box-shadow: 0 0 0 1px #d7d7d7;
        display: flex;
        align-items: center;

        input {
          height: 100%;
          font-size: 14px;
          padding: 0 10px;
        }

        img {
          margin-left: auto;
          height: 45px;
          width: 120px;
        }
      }

      >input {
        width: 100%;
        background-color: #b0352f;
        color: #fff;
        text-align: center;
        height: 45px;
        border-radius: 3px;
      }

      .zc {
        display: flex;

        a:nth-of-type(1) {
          color: #222;
          font-size: 14px;
        }

        a:nth-of-type(2) {
          color: #222;
          font-size: 14px;
          margin-left: auto;
        }
      }
    }
  }
}
</style>
